<template>
      <!-- 项目情况 -->
    <div class="pro-situation">
        <div class="project-con">
            <span class="bar-left"></span>
            <span class="project-title">综合计划执行情况排名</span>
            <span class="bar-left"></span>
           
    
            <div class="sum-select">
               <div>
               <el-select v-model="value" placeholder="请选择" size="20">
                 <el-option
                 v-for="item in options"
                      :key="item.value"
                         :label="item.label"
                     :value="item.value"
                     
                       popper-class="select-option">
                    </el-option>
               </el-select>

              </div> 
            </div>
            <div class="dept-con">
                <div id="rollbotton">
                    <p v-for="(v, index) in profit" :key="v.id">
                        <img v-if="index == 0" src="../../../assets/img/1_03.gif" />
                        <img v-if="index == 1" src="../../../assets/img/1_06.gif" />
                        <img v-if="index == 2" src="../../../assets/img/1_08.gif" />
                        <span v-if="index > 2">{{ index + 1 }}</span>

                        <span>{{ v.companyName}}
                          <!-- <span class="dept-price">{{ v.amount }}万元</span> -->
                          <span  style="display:inline-block; width:15%;font-size=11px ;text-aling:right;float:right">100%</span>
                             <span style="display:block;width:100%;height:13px;"> 
                <span style="display:inline-block;width:90%;background:#ecf6f2;height:13px;border-radius: 6.5px;" v-if="index==0">
                     <span :style="{width: v.asbe +'%'}" class="span4"></span>
                </span>
                 <span style="display:inline-block;width:90%;background:#ecf6f2;height:13px;border-radius: 6.5px;" v-if="index==1">
                     <span :style="{width: v.asbe +'%'}" class="span3"></span>
                </span> 
                <span style="display:inline-block;width:90%;background:#ecf6f2;height:13px;border-radius: 6.5px;" v-if="index==2">
                     <span :style="{width: v.asbe +'%'}" class="span2"></span>
                </span> 
                <span style="display:inline-block;width:90%;background:#ecf6f2;height:13px;border-radius: 6.5px;" v-if="index >2">
                     <span :style="{width: v.asbe +'%'}" class="span1"></span>
                </span>
              
              </span>
                        </span>
                    </p>
                </div>
               
            </div>
        </div>
        <!-- <div class="more-btn">
            <span class="btn-text">查看更多</span>
        </div> -->
    </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
        activeName:'first',
        value:'1',
         options: [{
          value: '1',
          label: '项目情况/电网基建'
        }, {
          value: '2',
          label: '项目情况/电网小型基建'
        }, {
          value: '3',
          label: '项目情况/生产技改'
        }, {
          value: '4',
          label: '项目情况/生产辅助技改'
        }, {
          value: '5',
          label: '项目情况/生产大修'
        },
        {
          value: '6',
          label: '项目情况/生产辅助大修'
        },
         {
          value: '7',
          label: '项目情况/零星购置'
        },
         {
          value: '8',
          label: '项目情况/市场营销'
        },
         {
          value: '9',
          label: '项目情况/电网数字化'
        }
        ,
         {
          value: '10',
          label: '项目情况/研究开发'
        },
         {
          value: '11',
          label: '项目情况/教育培训'
        },
         {
          value: '12',
          label: '项目情况/管理咨询'
        }, {
          value: '14',
          label: '项目情况/股权投资'
        },
         {
          value: '13',
          label: '项目情况/产业基建'
        }, {
          value: '15',
          label: '项目情况/产业技改'
        },{
          value: '16',
          label: '项目情况/产业大修'
        },
         ],
        profit: [
        //利润
        {
          id: 0,
          companyName: "国家电网公司",
          asbe: 100,
          amount: "32,543.0000",
        },
        { id: 1, companyName: "国网北京市电力公司", asbe: 100, amount: "21,234.0000" },
        { id: 2, companyName: "国网天津市电力公司", asbe: 100, amount: "21,003.0000" },
        { id: 3, companyName: "国网河北省电力公司", asbe: 100, amount: "11,532.0000" },
        { id: 4, companyName: "国网冀北电力有限公司", asbe: 100, amount: "10,231.0000" },
        { id: 5, companyName: "国网上海市电力公司", asbe: 100, amount: "10,190.0000" },
        { id: 6, companyName: "国网山西省电力公司", asbe: 100, amount: "10.084.0000" },
        { id: 7, companyName: "国网山东电力集团公司", asbe: 100, amount: "10,001.000" },
        { id: "8a", companyName: "国网安徽省电力公司", asbe: 100, amount: "10,001.000" },
        { id: "9a", companyName: "国网江苏省电力公司", asbe: 100, amount: "10,001.000" },
        {
          id: "10a",
          companyName: "国网浙江省电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
        {
          id: "11a",
          companyName: "国网福建省电力有限公司",
          asbe: 100,
          amount: "10,001.000",
        },
        {
          id: "12a",
          companyName: "国网湖北省电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
        {
          id: "13a",
          companyName: "国网河南省电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
        {
          id: "14a",
          companyName: "国网江西省电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
        {
          id: "15da",
          companyName: "国网湖南省电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "1d5a",
          companyName: "国网重庆市电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "1c5a",
          companyName: "国网四川省电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "15xa",
          companyName: "国网辽宁省电力有限公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "15fa",
          companyName: "国网黑龙江省电力有限公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "15ea",
          companyName: "国网吉林省电力有限公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "1w5a",
          companyName: "国网甘肃省电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "15ya",
          companyName: "国网内蒙古东部电力有限公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "15ua",
          companyName: "国网陕西省电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "15ga",
          companyName: "国网西藏电力有限公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "15na",
          companyName: "国网青海省电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "15ka",
          companyName: "国网宁夏电力公司",
          asbe: 100,
          amount: "10,001.000",
        },
         {
          id: "1o5a",
          companyName: "国网新疆电力公司",
          asbe: 100,
          amount: "10,001.000",
        }
      ],
    };
  },
  methods:{
        handleChange(value){
           console.log(value)
        },
        handleClick(){
            
        }

        
  }

};
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.pro-situation {
    width:468px;
    height: 785px;
    background: #fff;border: solid 1px #ccc;
    // box-shadow: 0px 0px 20px gainsboro;
    .project-con{
        width: 90%;
        margin-left: 5%;
        padding-top: 10px;
        .project-title {
            display: inline-block;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            color: #595959;
            margin: 0 20px;

        }
        .bar-left{
            width: 24%;
            display: inline-block;
            height: 1px;
            background-color: #d8d8d8;
            vertical-align: middle;

        }
        .sum-select {
            overflow: hidden;
            margin-top: 15px;
            width: 450px;
            position: relative;
            // background: #ccc;
            z-index: 999;
            .sum-sel{
                width: 450px;
               
                position: absolute;
            .el-cascader {
                position: absolute;
                width: 100%;
                z-index: 9;
                 
            }
            
            }
        }
        .dept-con {
            width:100%;
            margin-top: 20px;
            #rollbotton {
            width: 100%;
           height: 630px;
            overflow-x: hidden;
            overflow-y: scroll;
            }
            #rollbotton::-webkit-scrollbar {
  width: 8px;
}
#rollbotton::-webkit-scrollbar-track {
  background: #ddf0e8;
  border-radius: 2px;
}
#rollbotton::-webkit-scrollbar-thumb {
  background: #a2f1d0;
  border-radius: 4px;
}
#rollbotton::-webkit-scrollbar-thumb:hover {
  background: #32f3a3;
}
            .right_container {
            width: 98%;
            height: 95%;
            background-color: #fff;
            padding: 10px;
            border: 1px solid rgb(211, 209, 209);
            }
            #rollbotton {
              
                > p {
                    padding: 2.1px 0;
                    display: flex;

                    img {
                    width: 40px;
                    height: 30px;
                    margin-top: 5px;
                    margin-right: 10px;
                    }

                    > span:nth-child(1) {
                    display: inline-block;
                    width: 40px;
                    margin: 5px 10px 0 0;
                    line-height: 30px;
                    text-align: center;
                    height: 30px;
                    background-color: #ecf6f2;
                    border-radius: 50%;
                    }
                    > span:nth-child(2) {
                    flex: 1;
                    }
                }
                .last {
                    display: flex;
                    border-top: 1px solid #ccc;
                    justify-content: space-around;
                    align-items: center;
                    height: 20px;
                    cursor: pointer;
                }
                .dept-price {
                    text-align: right;
                    display: inline-block;
                    float: right;
                    padding-right: 10px;
                }
            }
            
        }
    }
    .more-btn{
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        text-align: center;
        border-top: 1px solid #f5f5f5;
        .btn-text {
            font-size: 14px;
            color: #5c5c5c;
            cursor: pointer;
        }
    }
}
.span1{
    display:inline-block;height:13px;background:#4Aaa84;
    float: left;border-radius: 6.5px;
  }
  .span2{
    display:inline-block;height:13px;background:#71bae5;
    float: left;border-radius: 6.5px;
  }
  .span3{
    display:inline-block;height:13px;background:#ffcf44;
    float: left;border-radius: 6.5px;
  }
  .span4{
    display:inline-block;height:13px;background:#f47b8e;
    float: left;border-radius: 6.5px;
  }

  .el-select{
    width: 90%;
  }
  .el-option{
    padding-left: 20px;
  }
  .el-select-dropdown__item {
  padding-left: 19px;
  padding-top: 5px;
 
}
</style>